<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<!-- ProjectGroup Connector Mapping -->
<div class="container-fluid">
    <div class="row">
        <form class="form-horizontal" role="form" method="post">
            <!-- 分组管理 -->
            <div class="col-md-12" th:if="${projectGroups?.size() gt 0}">
                <!-- 显示分组开始位置 -->
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-4">
                                <select id="projectGroup" name="projectGroup" class="form-control select-control">
                                    <option value="" th:text="全部" selected/>
                                    <option th:each="g,s:${projectGroups}" th:value="${g?.id}" th:text="${g?.name}" th:selected="${g?.id eq projectGroupId}"/>
                                </select>
                            </div>
                            <div class="col-md-6"></div>
                            <div class="col-md-2 text-right">
                                <div th:if="${not #strings.isEmpty(projectGroupId) }">
                                    <button type="button" class="btn btn-primary" id="editProjectGroupBtn">
                                        <span class="fa fa-pencil"></span>修改
                                    </button>
                                    <button type="button" class="btn btn-default" id="removeProjectGroupBtn">
                                        <span class="fa fa-times"></span>删除
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="simple" color="#6f5499" />
                <!-- 显示分组结束位置 -->
            </div>

            <!-- 连接管理 -->
            <div class="col-md-12">
                <!-- 连接开始位置 -->
                <div class="form-group">
                    <div class="col-md-10">
                        <button type="button" class="btn btn-primary" id="indexAddConnectorBtn">
                            <span class="fa fa-plus"></span>添加连接([[${connectors?.size()} ?: 0]])
                        </button>
                    </div>
                    <div class="col-md-2 text-right">
                        <button type="button" class="btn btn-default" id="addProjectGroupBtn" th:if="${connectorSize gt 0}">
                            <span class="fa fa-plus"></span>添加分组([[${projectGroups?.size()} ?: 0]])
                        </button>
                    </div>
                </div>
                <!-- 显示连接列表 -->
                <div class="row" th:if="${connectors?.size() gt 0}">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <!-- 连接 -->
                            <div class="panel-body text-center">
                                <div class="row connectorList">
                                    <!-- 连接__开始 -->
                                    <div class="col-md-1" th:each="c,state : ${connectors}">
                                        <div th:id="${c?.id}" class="dbsyncer_block">
                                            <div class="row">
                                                <img draggable="false" th:src="@{'/img/'+ ${c?.config?.connectorType} + '.png'}">
                                            </div>
                                            <div class="row dbsyncer_over_hidden">
                                                <span th:text="${c?.name}" th:title="${c?.name}" />
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li class="copy" th:url="'/connector/copy?id='+${c?.id}"><a href="javascript:;"><i class="fa fa-copy"></i>&nbsp;复制</a></li>
                                                <li class="remove" th:url="'/connector/remove?id='+${c?.id}"><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i> 删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 连接__结束 -->

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- 连接开结束位置 -->
            </div>

            <!-- 驱动管理 -->
            <div class="col-md-12">
                <!-- 驱动开始位置 -->
                <div class="form-group" th:if="${connectorSize gt 0}">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary" id="indexAddMappingBtn">
                            <span class="fa fa-plus"></span>添加驱动([[${mappings?.size()} ?: 0]])
                        </button>
                    </div>
                </div>

                <!-- 显示驱动列表 -->
                <div class="row" th:if="${mappings?.size() gt 0}">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row mappingList">
                                    <!-- 驱动__开始 -->
                                    <div class="col-md-4" th:each="m,state : ${mappings}">
                                        <div th:id="${m?.id}" th:class="${m?.model eq 'full'} ? 'dbsyncer_block dbsyncer_block_full' : 'dbsyncer_block dbsyncer_block_increment'">
                                            <!--驱动标题信息 -->
                                            <div class="row text-center dbsyncer_driver_name" th:text="${m?.name}" th:title="${m?.name}"></div>

                                            <div class="row">
                                                <!--左边驱动信息 -->
                                                <div class="col-md-5">
                                                    <div class="mapping_well">
                                                        <div class="col-md-4">
                                                            <img draggable="false" th:src="@{'/img/'+ ${m?.sourceConnector?.config?.connectorType} + '.png'}">
                                                        </div>
                                                        <div class="col-md-7 dbsyncer_over_hidden">
                                                            <span th:text="${m?.sourceConnector?.name}" th:title="${m?.sourceConnector?.name}"></span>
                                                        </div>
                                                        <div class="col-md-1"></div>
                                                    </div>
                                                    <span th:if="${m?.sourceConnector?.running}" th:title="连接正常" class="well-sign-left"><i class="fa fa-2x fa-circle well-sign-green"></i></span>
                                                    <span th:unless="${m?.sourceConnector?.running}" th:title="连接异常" class="well-sign-left"><i class="fa fa-2x fa-times-circle-o well-sign-red"></i></span>
                                                </div>

                                                <!--中间图标 -->
                                                <div class="col-md-2">
                                                    <div class="line">
                                                        <span th:if="${m?.meta?.state eq 1}" class="running-through-rate well-sign-green">✔</span>
                                                        <span th:if="${m?.meta?.state eq 0}" class="running-state label label-info">未运行</span>
                                                        <span th:if="${m?.meta?.state eq 1}" class="running-state label label-success">运行中</span>
                                                        <span th:if="${m?.meta?.state eq 2}" class="running-state label label-warning">停止中</span>
                                                    </div>
                                                </div>

                                                <!-- 右边驱动信息 -->
                                                <div class="col-md-5">
                                                    <div class="mapping_well">
                                                        <div class="col-md-4">
                                                            <img draggable="false" th:src="@{'/img/'+ ${m?.targetConnector?.config?.connectorType} + '.png'}">
                                                        </div>
                                                        <div class="col-md-7 dbsyncer_over_hidden">
                                                            <span th:text="${m?.targetConnector?.name}" th:title="${m?.targetConnector?.name}"></span>
                                                        </div>
                                                        <div class="col-md-1"></div>
                                                        <span th:if="${m?.targetConnector?.running}" th:title="连接正常" class="well-sign-right"><i class="fa fa-2x fa-circle well-sign-green"></i></span>
                                                        <span th:unless="${m?.targetConnector?.running}" th:title="连接异常" class="well-sign-right"><i class="fa fa-2x fa-times-circle-o well-sign-red"></i></span>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <table class="table table-hover">
                                                    <tbody th:with="model=${m?.model},total=${m?.meta?.total},success=${m?.meta?.success},fail=${m?.meta?.fail},beginTime=${m?.meta?.beginTime},endTime=${m?.meta?.endTime}">
                                                    <tr>
                                                        <td class="text-left">
                                                            [[${m?.meta?.model}]]同步>
                                                            <span th:if="${model eq 'full'}">
                                                                总数:[[${total}]]
                                                                <span th:if="${total gt 0 and (success + fail) gt 0}">,进度:[[${#numbers.formatPercent(((success + fail) / total), 2, 2)}]]</span>
                                                                ,耗时:
                                                                <span th:with="seconds=${(endTime - beginTime) / 1000}">
                                                                    <span th:if="${seconds lt 60}" th:text="${seconds + '秒'}" />
                                                                    <span th:if="${seconds ge 60}" th:with="minutes=${seconds / 60}" th:text="${minutes + '分' + (seconds - minutes * 60) + '秒'}" />
                                                                </span>
                                                            </span>
                                                            <span th:if="${model eq 'increment'}">
                                                                总数:[[${#numbers.formatDecimal((success + fail),0 ,0)}]]
                                                            </span>
                                                            <span th:if="${success gt 0}">,成功:[[${success}]]</span>
                                                            <span th:if="${fail gt 0}">,失败:[[${fail}]] <a th:id="${m?.meta?.id}" href="javascript:;" class="label label-danger queryData">日志</a></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-left">
                                                            启动时间>
                                                            <span th:if="${beginTime gt 0}">[[${#dates.format(beginTime, 'yyyy-MM-dd HH:mm:ss')}]]</span>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="row text-right text-muted" th:text="${#dates.format(m?.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
                                        </div>

                                        <!-- 右上角下拉菜单 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-2x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <!-- 未运行 -->
                                                <li th:if="${m?.meta?.state ne 1}" th:url="'/mapping/start?id='+${m?.id}"><a href="javascript:;"><i class="fa fa-check-circle-o well-sign-green"></i>&nbsp;&nbsp;启动</a></li>
                                                <!-- 运行中 -->
                                                <li th:if="${m?.meta?.state eq 1}" th:url="'/mapping/stop?id='+${m?.id}"><a href="javascript:;"><i class="fa fa-times-circle-o well-sign-red"></i>&nbsp;&nbsp;停止</a></li>
                                                <li th:url="'/mapping/copy?id='+${m?.id}"><a href="javascript:;"><i class="fa fa-copy"></i>&nbsp;复制</a></li>
                                                <!-- 未运行 -->
                                                <li th:if="${m?.meta?.state ne 1}" th:url="'/mapping/remove?id='+${m?.id}" confirm="true" confirmMessage="确认删除驱动?"><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 驱动__结束 -->

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 驱动结束位置 -->
            </div>

        </form>
    </div>
</div>

<script th:src="@{/js/index/index.js}"></script>
</html>